Day9 HTML 常用標籤： table

2021 iThome 鐵人賽

DAY 9

Modern Web

30天學網頁設計系列第 9 篇

13th鐵人賽

Hinata

團隊imac_跳過這篇

2021-09-23 00:11:06

2591 瀏覽

分享至

表格 (table)

表格是一個由列和欄組成的結構化資料(tabular data)。表格能幫助你快速查看不同資料類型間的關聯值。
在HTML網頁可使用表格元素table來顯示表格。是所有表格元素的最外層，其餘的表格元素如 thead、tbody、tr、th、td等都必須寫在table裡。

舉個最基本的例子：

<table border="1">
　<tr>
　<td>表格範例</td>
　</tr>
</table>

程式執行後會顯示：

而table中的標籤按照以下順序，組成表格：

一個選擇性的caption標籤，用來表示表格的標題
一個或多個選擇性的colgroup標籤，用來分組表格的直行以進行格式化
一個選擇性的thead標籤，用來表示表格中不同直行的標題
一個在以下的標籤之前或之後選擇性的tfoot標籤，用來對表格中不同直行做分組，來指定不同分組內容的頁腳或標題
一個或多個選擇性的tbody標籤，做為表格主要內容的容器
一個或多個必要的tr標籤，用來定義表格的橫列
一個或多個必要的td(或th) 標籤，用來表示表格中每一直行的單元格

表格、橫列、直行

table、tr、td是HTML表格中最常見到也一定會用到的三個標籤，table用來包著整個表格的結構和內容，tr用來定義表格有幾個橫列，tr裡面有td用來定義表格有幾個直行，至於td裡是放實際單元格的資料。

讓我們舉個複雜一點的例子：

<!DOCTYPE html>
<html>
<head>    
<style>
table, th, td {
    border:1px solid 
}
</style>    
</head>
<body>

    <h1>火影忍者日中英文對照表</h1>

    <table>
        <thead>
            <tr>
                <th>中文名字</th>
                <th>日文名字</th>
                <th>英文名字</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>漩渦鳴人</td>
                <td>うずまきナルト</td>
                <td>Uzumaki Naruto</td>
            </tr>
            <tr>
                <td>宇智波佐助</td>
                <td>うちはサスケ</td>
                <td>Uchiha Sasuke</td>
            </tr>
            <tr>
                <td>日向雛田</td>
                <td>日向ヒナタ</td>
                <td>Hyuuga Hinata</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

程式執行後會顯示：